<template>
	<view class="page">
		<div class="biaotou">
		<p class="welcome">欢迎使用~</p>
		<p class="register-title">用户登录</p>
		</div>
		<view class="register-form">
			<view class="form-item">
				<input type="text" auto-focus placeholder="请输入手机号" maxlength="11" v-model="phoneNum"/>
			</view>
		</view>
		<view class="register-form">
			<view class="form-item">
				<input type="password" placeholder="请输入密码" maxlength="11" v-model="password"/>
			</view>
		</view>
		<p class="bottom1">
		<span class="wenzi1">我已阅读并同意</span>
		<span class="wenzi">用户手册</span>
		<span class="wenzi1">和</span>
		<span class="wenzi">隐私政策</span>
		</p>
		<view class="register-btn" @click="loginForm">
			立即登录
		</view>
		<p class="bottom">
			还没账号？
			<span class="wenzi" @click="goReg">立即注册</span>
		</p>
	</view>

	
</template>

<script>
	import {login} from "../../api/index.js"
	export default {
		data() {
			return {
				phoneNum:"",
				password:""
			}
		},
		methods: {
			goRegister(){
				// 跳转到注册页面
				uni.navigateTo({
					url:"/pages/register/register"
				})
			},
			loginForm(){
				// 组合数据
				let obj = {
					phoneNum:this.phoneNum,
					password:this.password
				}
				console.log(obj);
				// 判断输入的是否为空
				if(!this.phoneNum.trim() || !this.password.trim()){
					uni.showToast({
						title:"不能为空"
					})
					return
				}
				login(obj).then(res=>{
					if(res.data.status === 0){
						console.log(res,"登录返回的数据");
						uni.showToast({
							title:"登录成功"
						})
						// 跳转页面
						setTimeout(()=>{
							// 跳转到首页面 使用switchTab 因为首页是tabbar页面所以需要用switchTab跳转
							uni.switchTab({
								url:"/pages/index/index"
							})
						},800)
						// 把返回的token 和 userInfo存到本地 uni.setStorageSync
						uni.setStorageSync("name","白白")
						uni.setStorageSync("token",res.data.token)
						uni.setStorageSync("userInfo",res.data.userInfo)
					} else {
						uni.showToast({
							title:"登录失败"
						})
					}
				})			
			}
		}
	}
</script>


<style lang="scss" scoped>
    .page{
		background: linear-gradient(#77DDFF, #FFB7DD);
		width:100%;
		height:100vh;
		.welcome{
			font-size:16px;
			font-weight: bold;
			width:100%;
			height:40rpx;
			line-height: 40rpx;
			// background-color: #FFB7DD;
			padding-left: 15rpx;
		
		}
		}
		.register-title{
			font-size: 14px;
			font-weight: bold;
			width:100%;
			height:40rpx;
			line-height: 40rpx;
			padding-left: 15rpx;
			margin:50rpx 0 50rpx 0;
		}
		.form-item{
			// background-color: red;
			// width:85%;
			// height:50px;
			margin: 20px;
			// // font-size: 14px;
			background-color: #fff;
			border-radius: 20px;
			padding:20rpx;
		}
		.wenzi1{
			color:grey;
		}
		.wenzi{
			color:#009FCC;
			margin: 0 3px 0 3px; 
			
		}
		.register-btn{
			width:85%;
			height:80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #FF88C2;
			margin:70rpx auto 0;
			border-radius: 30rpx;
			
		}
		.bottom1{
			font-size: 12px;
			margin-left:10px;
		}
		.bottom{
			font-size: 12px;
			margin-top: 12px;
			text-align: center;
		}
</style>
